<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'编辑'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 5 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="主销导购" v-bind="validateInfos.main_salesman_id">
            <a-select
              allow-clear
              placeholder="请选择"
              optionFilterProp="label"
              :options="gouOptions"
              v-model:value="form.main_salesman_id"
            />
          </a-form-item>
          <a-form-item label="辅销导购">
            <a-select
              allow-clear
              placeholder="请选择"
              optionFilterProp="label"
              :options="gouOptions"
              v-model:value="form.vice_salesman_id"
            />
          </a-form-item>
          <a-form-item label="消费动机">
            <a-select
              allow-clear
              placeholder="请选择"
              optionFilterProp="label"
              :options="feeOptions"
              v-model:value="form.consume_motive_code"
            />
          </a-form-item>
          <a-form-item label="销售备注">
            <a-select
              allow-clear
              placeholder="请选择"
              optionFilterProp="label"
              :options="noteOptions"
              v-model:value="form.note_id"
            />
          </a-form-item>
          <a-form-item label="支付方式">
            <a-row :gutter="24" v-for="(item, index) in payForm" :key="index">
              <a-col :md="10" :sm="10" :xs="10">
                <a-form-item :label="`支付方式${index + 1}`">
                  <a-select
                    allow-clear
                    placeholder="请选择"
                    optionFilterProp="label"
                    :options="payOptions"
                    v-model:value="item.type"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="10" :xs="10">
                <a-form-item label="金额">
                  <a-input
                    allow-clear
                    placeholder="请输入"
                    v-model:value="item.value"
                    @change="change"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="4" :xs="4">
                <a-form-item label="" :colon="false">
                  <span class="ele-text-danger hands" @click="delType(index)"
                    >删除</span
                  >
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="4" :sm="4" :xs="4">
                <a-form-item label="" :colon="false">
                  <div class="ele-text-primary hands" @click="addType()"
                    >+添加</div
                  >
                </a-form-item>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="总金额">
            <div class="ele-text-primary">{{ props.money || 0 }}</div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { add } from '@/api/material/brand';
  import {
    salesman_list,
    get_note_list
  } from '@/api/order/order/jewelry_order';
  import { get_list } from '@/api/setting/sales_subject';
  import { get_pay_type_select } from '@/api/setting/pay_type';
  import {
    get_sales_manage_detail,
    get_sales_manage_edit
  } from '@/api/order/sales_manage';
  // 表格列配置
  const useForm = Form.useForm;

  const emit = defineEmits(['done', 'update:visible']);

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    money: [Number, String],
    order_sn: String
  });

  // 提交状态
  const loading = ref(false);
  const checked = ref(true);

  const gouOptions = ref([]);
  const noteOptions = ref([]);
  const feeOptions = ref([]);
  const signOptions = ref([]);
  const payOptions = ref([
    /* { label: '现金', value: 'cash', isSelect: false },
		{ label: '微信', value: 'wechat', isSelect: false },
		{ label: '支付宝', value: 'alipay', isSelect: false },
		{ label: '刷卡', value: 'card', isSelect: false },
		{ label: '银行转账', value: 'transfer', isSelect: false } */
  ]);
  const payForm = ref([
    {
      label: null,
      value: ''
    }
  ]);

  // 表单数据
  const form = reactive({
    order_sn: props.order_sn,
    main_salesman_id: null,
    vice_salesman_id: null,
    consume_motive_code: null,
    note_id: null,
    earnest_amount: 0,
    cash: 0,
    wechat: 0,
    alipay: 0,
    card: 0,
    transfer: 0
  });

  onMounted(() => {
    if (props.order_sn) {
      payForm.value = [];
    }
    get_sales_manage_detail({ order_sn: props.order_sn }).then((res) => {
      console.log('res==', res);
      form.main_salesman_id = res.order.main_salesman_id
        ? res.order.main_salesman_id
        : null;
      form.vice_salesman_id = res.order.vice_salesman_id
        ? res.order.vice_salesman_id
        : null;
      form.consume_motive_code = res.order.consume_motive_code
        ? res.order.consume_motive_code.toString()
        : null;
      form.note_id = res.order.note_id ? res.order.note_id : null;
      form.earnest_amount = res.pay.earnest_amount
        ? Math.abs(Number(res.pay.earnest_amount))
        : 0;
      if (form.earnest_amount) {
        payForm.value.push({
          label: '储值卡',
          value: form.earnest_amount,
          type: 'earnest_amount'
        });
        payOptions.value.forEach((item) => {
          if (item.value == 'earnest_amount') {
            item.isSelect = true;
          }
        });
      }
      form.cash = res.pay.cash ? Number(res.pay.cash) : 0;
      if (form.cash) {
        payForm.value.push({ label: '现金', value: form.cash, type: 'cash' });
        payOptions.value.forEach((item) => {
          if (item.value == 'cash') {
            item.isSelect = true;
          }
        });
      }
      form.wechat = res.pay.wechat ? Number(res.pay.wechat) : 0;
      if (form.wechat) {
        payForm.value.push({
          label: '微信',
          value: form.wechat,
          type: 'wechat'
        });
        payOptions.value.forEach((item) => {
          if (item.value == 'wechat') {
            item.isSelect = true;
          }
        });
      }
      form.alipay = res.pay.alipay ? Number(res.pay.alipay) : 0;
      if (form.alipay) {
        payForm.value.push({
          label: '支付宝',
          value: form.alipay,
          type: 'alipay'
        });
        payOptions.value.forEach((item) => {
          if (item.value == 'alipay') {
            item.isSelect = true;
          }
        });
      }
      form.card = res.pay.card ? Number(res.pay.card) : 0;
      if (form.card) {
        payForm.value.push({ label: '刷卡', value: form.card, type: 'card' });
        payOptions.value.forEach((item) => {
          if (item.value == 'card') {
            item.isSelect = true;
          }
        });
      }
      form.transfer = res.pay.transfer ? Number(res.pay.transfer) : 0;
      if (form.transfer) {
        payForm.value.push({
          label: '转账',
          value: form.transfer,
          type: 'transfer'
        });
        payOptions.value.forEach((item) => {
          if (item.value == 'transfer') {
            item.isSelect = true;
          }
        });
      }
    });
    get_pay_type_select().then((res) => {
      res.forEach((item) => {
        item.isSelect = false;
      });
      payOptions.value = res;
    });
    salesman_list().then((res) => {
      gouOptions.value = res.data;
    });
    get_note_list({
      page: 1,
      page_size: 9999
    }).then((res) => {
      res.data.forEach((item) => {
        noteOptions.value.push({
          label: item.name,
          value: item.id
        });
      });
    });
    get_list({
      page: 1,
      page_size: 99999,
      filters: {
        type: 'motive'
      }
    }).then((res) => {
      res.list.forEach((item) => {
        feeOptions.value.push({
          label: item.name,
          value: item.code
        });
      });
    });
  });
  const addType = () => {
    if (payForm.value.length < payOptions.value.length) {
      payForm.value.push({
        label: null,
        value: '',
        type: ''
      });
    }
    console.log(payForm.value);
  };
  const delType = (index) => {
    payForm.value.splice(index, 1);
  };

  const change = (e) => {
    console.log(e.target.value);
    if (Number(e.target.value) > Number(props.money)) {
      return message.warning('金额不能大于总金额');
    }
    let num = 0;
    payForm.value.forEach((item, index) => {
      num += Number(item.value);
    });
    if (num > Number(props.money)) {
      return message.warning('金额相加不能大于总金额');
    }
  };

  // 表单验证规则
  const rules = reactive({
    main_salesman_id: [
      {
        required: true,
        message: '请选择主销',
        type: 'number',
        trigger: 'change'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);

  /* 保存*/
  const save = () => {
    validate()
      .then(() => {
        payForm.value.forEach((item, index) => {
          form[item.type] = item.value;
        });
        get_sales_manage_edit(form)
          .then((res) => {
            message.success(res.msg);
            emit('done');
            updateVisible(false);
          })
          .catch((e) => {
            message.error(e);
          });
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
